<template>
    <div class="bg-white" style="margin:-10px;margin-bottom:0!important">
        <!-- 商品列表 -->
        <el-tabs v-model='activeName'>
            <el-tab-pane label="运费模板" name="first">
                <div>
                    <el-button type='primary' @click="openModel(false)">添加模板</el-button>
                </div>
                <el-table :data="tableData" style="margin-top: 20px; background-color: antiquewhite;">
                    <el-table-column label="模板名称" align="center" prop='name' width="250">
                    </el-table-column>
                    <el-table-column label="计费方式" align="type">
                        <template slot-scope="scope">
                            {{ scope.row.type | formatType }}
                        </template>
                    </el-table-column>
                    <el-table-column label="排序" align="center" prop='order'>
                    </el-table-column>

                    <el-table-column prop="ischeck" label="操作" align="center">
                        <template slot-scope="scope">
                            <!-- @click="openModel(scope.$index)"这个$index传递的是当前的索引 -->
                            <el-button type="text" icon="el-icon-arrow" size="mini" plain
                                @click="openModel(scope.$index)">
                                修改
                            </el-button>
                            <el-button type="text" icon="el-icon-arrow" size="mini" plain
                                @click="openDrawer(scope.row)">
                                配置模板({{ scope.row.express_values.length }})
                            </el-button>
                            <el-button type="text" icon="el-icon-arrow" size="mini" plain @click="delItem(scope.row)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>

            <el-tab-pane label="物流跟踪" name="second">
                <el-form ref="form" :model="form" label-width="130px">
                    <el-form-item label="快递100 Customer">
                        <el-input type='number' v-model="form.customer" size='mini' style='width:25%'></el-input>
                        <small class="text-secondary d-block">用于查询物流信息，快递100申请</small>
                    </el-form-item>
                    <el-form-item label="快递100 Key">
                        <el-input type='number' v-model="form.key" size='mini' style='width:25%'></el-input>
                        <small class="text-secondary d-block">用于查询物流信息，快递100申请</small>
                    </el-form-item>
                    <el-form-item>
                        <el-button type='primary' size='mini'>保存</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>
        <el-footer class="border-top d-flex align-items-center px-0 position-fixed bg-white"
            style="bottom:0;left: 200px;right: 0; z-index: 100;">
            <!-- flex:1占剩余的所有空间 -->
            <div style="flex: 1;">
                <el-pagination :current-change="page.current" :page-sizes="page.sizes" :page-size="page.size"
                    layout="total, sizes, prev, pager, next, jumper" :total="page.total" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </el-footer>

        <!-- 新增、修改规格的模态框 -->
        <el-dialog title="添加模板" :visible.sync="createModel" top="5vh" width="35%">
            <!-- 表单内容 -->
            <el-form ref="form" :model="model" label-width="80px">
                <el-form-item label="模板名称" style="width:70%">
                    <el-input v-model="model.name" size="mini"></el-input>
                </el-form-item>

                <el-form-item label="排序" style="width:70%">
                    <el-input v-model="model.order" size="mini"></el-input>
                </el-form-item>


                <el-form-item label="收费类型">
                    <el-radio-group v-model="model.type">
                        <el-radio :label="0">按件数</el-radio>
                        <el-radio :label="1">按重量</el-radio>
                    </el-radio-group>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="createModel = false">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </span>
        </el-dialog>

        <el-drawer size="70%" :visible.sync="drawer" :with-header="false">
            <div>
                <el-table :data="express_values" style="margin-top: 20px; background-color: antiquewhite;">
                    <el-table-column label="ID" align="center" prop='id' width="250">
                    </el-table-column>
                    <el-table-column label="可配送区域" align="center" width="250">
                        <template slot-scope="scope">
                            <el-cascader :options="options" :props="props" v-model="scope.row.region" 
                            collapse-tags clearable  @change="change(scope.row)"></el-cascader>

                        </template>
                    </el-table-column>
                    <el-table-column label="首个/首重（kg）" align="type">
                        <template slot-scope="scope">
                            <el-input type=" number" size="mini" v-model="scope.row.first"
                                @change="change(scope.row)"></el-input>

                        </template>
                    </el-table-column>
                    <el-table-column label="运费（元）" align="type">
                        <template slot-scope="scope">
                            <el-input type=" number" size="mini" v-model="scope.row.first_price"
                                @change="change(scope.row)"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="续重/续件" align="type" prop='add'>
                        <template slot-scope="scope">
                            <el-input type=" number" size="mini" v-model="scope.row.add"
                                @change="change(scope.row)"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="续费" align="type">
                        <template slot-scope="scope">
                            <el-input type=" number" size="mini" v-model="scope.row.add_price"
                                @change="change(scope.row)"></el-input>
                        </template>
                    </el-table-column>


                    <el-table-column prop="ischeck" label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button type="text" icon="el-icon-arrow" size="mini" plain
                                @click="delValue(scope.row, scope.$index)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-button type="primary" class="mt-3 ml-3" size="mini" @click="addValue">添加策略
                </el-button>
            </div>
        </el-drawer>
    </div>
</template>
<script>
import common from '@/common/mixins/common';
export default {
    name: 'expressIndex',
    activeName: 'first',
    inject: ['app', 'layout'],
    mixins: [common],
    data() {
        return {
            // 在级联选择器中使用的名称是label和value，在后端返回的数据显示name，因此这么替换
            props: { 
                multiple: true,
                label:'name',
                value:'name'
             },
            options: [],
            preUrl: 'express',
            drawer: false,
            drawerId: 0,//抽屉内容的id
            activeName: 'first',
            form: {
                customer: '',
                key: '',
            },
            tableData: [
                //     {
                //     name: '全国统一邮费',
                //     type: 1,
                //     order: 100,
                //     status: 1,
                //     create_time: '2018-12-27',
                // }
            ],
            model: {
                name: '',
                order: 50,
                type: 0,
            },
            createModel: false,
            modelIndex: -1,//修改模板
            express_values: [], //抽屉的value
        }
    },
    filters: {
        formatType(value) {
            // 0是案件数，1是按重量
            let arr = [
                '按件数', '按重量'
            ]
            return arr[value]
        }
    },
    methods: {
        getListResult(e) {
            console.log(e);

            this.tableData = e.list

            // 为了让抽屉中的级联选择器的名称与后端返回的数据对应上
            this.options = e.area.map(item=>{
                item.children = item.citys.map(v=>{
                    v.children = v.districts
                    return v
                })
                return item
            })
        },
        submit() {
            let id = 0
            if (this.modelIndex !== -1) {
                id = this.tableData[this.modelIndex].id
            }
            this.addOrEdit(this.model, id)
            this.createModel = false
        },
        openModel(index) {
            // index不为1，说明是添加，先初始化
            if (index === false) {
                this.model = {

                    name: '',
                    order: 50,
                    type: 0,

                }
                this.modelIndex = -1
                return this.createModel = true
            }
            // 修改
            let item = this.tableData[index]
            this.model = {

                name: item.name,
                order: item.order,
                type: item.type,

            }
            this.modelIndex = -1
            return this.createModel = true
        },
        openDrawer(item) {
            console.log(item);

            this.express_values = item.express_values
            this.drawer = true

            this.drawerId = item.id
        },
        addValue() {
            this.showLoading();

            this.$axios.post('/admin/express_value', {
                first: 0,
                first_price: 0,
                add: 0,
                add_price: 0,
                region: [
                    ["全国", '所有', '所有']
                ],
                express_id: this.drawerId
            }, { token: true }).then((res) => {
                let data = res.data.data
                this.express_values.push(data)
                this.hideLoading();
            }).catch(() => {
                this.hideLoading();
            })
        },
        delValue(item, index) {
            this.showLoading();

            this.$axios.post('/admin/express_value/' + item.id + '/delete', {},
                { token: true }).then(() => {
                    this.express_values.splice(index, 1)
                    this.$message.success('删除成功')
                    this.hideLoading();
                }).catch(() => {
                    this.hideLoading();
                })
        },
        // 修改抽屉中的value值
        change(item) {
            this.showLoading();

            this.$axios.post('/admin/express_value/' + item.id, item,
                { token: true }).then(() => {

                    this.hideLoading();
                }).catch(() => {
                    this.hideLoading();
                })
        }
    }

}
</script>